<template>
	<view v-if="isLandscape">
		<!-- 横屏 -->
	</view>
	<view class="show-info" v-else>
		请将手机横屏显示
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLandscape:false
			}
		},
		//当页面加载完成触发
		mounted() {
			this.checkOrientation();
			window.addEventListener('resize', this.checkOrientation);
		},
		//当页面摧毁前触发
		beforeDestroy() {
			window.removeEventListener('resize', this.checkOrientation);
		},
		methods: {
			checkOrientation() {
			  // 检测设备方向 宽大于高
			  this.isLandscape = window.innerWidth > window.innerHeight;
			}
		}
	}
</script>

<style scoped>
.show-info{
	width: 100%;
	height: 100vh;
	background-color: black;
	color: #fff;
	text-align: center;
	line-height: 100vh;
	font-size: 25px;
}
</style>
